import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Ref, useEffect, useMemo, useRef, useState } from 'react';
import pageStyles from '@/common/pageLayout.less';
import { Button, Spin, Table, Tooltip, message } from 'antd';
import _ from 'lodash';
import moment from 'moment';
import { MaterialManageServices } from '../services/ModalService';
import { UpdateTableCommon } from '@/pages/AssetManage/AssetList/mconfig';
import { getTenantID, onCloseModalCommon } from '@/utils';
import { detailDiffServices } from '../services/UpdataService';
import { ILoadMapTypeAll } from '@/common';

/** 差异明细 表单页 选择盘点计划-模态框 */
export const UpdataPlanModal = ({ onSave, onClose, curRes, selectPlan }) => {
  /**弹框的ref*/
  const updateModalRef: Ref<IOneModalRef> = useRef(null);

  /** 根样式 */
  const styleFixCls = 'contract-styfixcls-';

  const [selectedRows, setSelectedRows] = useState<Record<string, any>[]>([]); /** 表格选中行内容 */

  /** 获取列表 */
  const { data, manageTableParams, loading, pagination, searchList, reloadRequest } = MaterialManageServices(curRes);

  /** 详情 service */
  const { detailDiffRun, detailDiffLoading } = detailDiffServices((res) => {
    if (res.msgFlag) {
      const tempObj = {
        row: selectedRows[0],
        info: res?.obj,
      };
      onSave(tempObj);
      onCloseModalCommon(updateModalRef);
    }
  });

  useEffect(() => {
    reloadRequest({
      state: `${getTenantID()}${ILoadMapTypeAll.ASSET_INPLAY_STATUS}1003`,
    });
  }, []);

  /** 搜索 */
  const onSearch = (payload: Record<string, any>) => {
    reloadRequest({ ...payload });
  };

  /** 重置 */
  const onReset = (payload: Record<string, any>) => {
    reloadRequest({ ...payload });
  };

  /** 分页change 方法 */
  const onPageChange = (current: number, pageSize: number) => {
    reloadRequest({ ...manageTableParams, current, pageSize });
  };

  const getTableColumn: any = useMemo(() => {
    return [
      {
        title: '事项名称',
        dataIndex: 'inventoryTitle',
        key: 'inventoryTitle',
        width: 80,
        render: (text: string | null, record: Record<string, any>) => {
          return (
            <Tooltip title={text} placement="top">
              <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                {text || '--'}
              </span>
            </Tooltip>
          );
        },
      },
      {
        title: '申请时间',
        dataIndex: 'createTime',
        key: 'createTime',
        visible: true,
        width: 80,
        unDrag: false,
        sorter: (a: any, b: any) => (a?.createTime > b?.createTime ? 1 : -1),
        render: (text: string, record: Record<string, any>) => {
          return (
            <Tooltip title={text} placement="top">
              <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                {text ? moment(text).format('YYYY-MM-DD') : '--'}
              </span>
            </Tooltip>
          );
        },
      },
      {
        title: '申请人',
        dataIndex: 'ownerName',
        key: 'ownerName',
        width: 120,
        render: (text: string | null, record: Record<string, any>) => {
          return (
            <Tooltip title={text} placement="top">
              <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                {text ? text : '--'}
              </span>
            </Tooltip>
          );
        },
      },
    ];
  }, []);

  /** 点击选中 */
  const onSelectTable = (obj) => {
    setSelectedRows([obj]);
  };

  const onSaveFun = () => {
    detailDiffRun({ inventoryID: selectedRows[0]?.id });
    // onSave(selectedRows);
    // onCloseModalCommon(updateModalRef);
  };

  useEffect(() => {
    setSelectedRows([selectPlan?.row]);
  }, []);

  const modelFooter = () => {
    return (
      <>
        <Button onClick={onSaveFun} disabled={selectedRows?.length === 0}>
          确定
        </Button>
      </>
    );
  };

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={updateModalRef}
        title={'选择盘点计划'}
        onCancel={onClose}
        width={document.body.clientWidth * 0.65}
        bodyStyle={{
          height: document.body.clientHeight * 0.55,
          padding: 10,
        }}
        footer={modelFooter()}
      >
        <Spin spinning={detailDiffLoading}>
          <div className={'list-table selectPackageTable'}>
            <UpdateTableCommon
              styleFixCls={styleFixCls}
              searchProps={{
                searchList,
                onReset,
                onSearch,
              }}
              selectTablePorps={{
                onSelectTable,
                selectRowObjList: selectedRows,
                selectType: 'radio',
                setCheckRows: setSelectedRows,
              }}
              tableProps={{
                columns: getTableColumn,
                loading,
                dataSource: data?.rows,
                pagination,
                onPageChange,
                rowKey: 'id',
              }}
            />
          </div>
        </Spin>
      </OneModal>
    </>
  );
};
